<template>
  <el-dialog :title="title" v-model="dialogVisible" width="600px" append-to-body>
    <el-form ref="marketingRef" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动名称" prop="activityName">
            <el-input v-model="form.activityName" placeholder="请输入活动名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动类型" prop="activityType">
            <el-select v-model="form.activityType" placeholder="请选择活动类型" style="width: 100%">
              <el-option label="折扣活动" value="1" />
              <el-option label="满减活动" value="2" />
              <el-option label="赠品活动" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker 
              v-model="form.startTime" 
              type="datetime" 
              placeholder="请选择开始时间" 
              style="width: 100%" 
              value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker 
              v-model="form.endTime" 
              type="datetime" 
              placeholder="请选择结束时间" 
              style="width: 100%" 
              value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序" prop="sortIndex">
            <el-input-number v-model="form.sortIndex" controls-position="right" :min="0" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="活动描述" prop="description">
        <el-input v-model="form.description" type="textarea" placeholder="请输入活动描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="MarketingEdit" lang="ts">
import { ref, getCurrentInstance, reactive, toRefs, nextTick, watch } from "vue";
import { ElForm } from "element-plus";
import modal from "@/plugins/modal";

const { proxy } = getCurrentInstance()!;

// 字典数据
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  open: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['update:open', 'success']);

// 定义变量
const marketingRef = ref<InstanceType<typeof ElForm> | null>(null);

// 表单数据
const data = reactive({
  dialogVisible: false,
  form: {},
  rules: {
    activityName: [{ required: true, message: "活动名称不能为空", trigger: "blur" }],
    activityType: [{ required: true, message: "活动类型不能为空", trigger: "blur" }],
    startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
    endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }]
  }
});

const { dialogVisible, form, rules } = toRefs(data);

// 监听open属性变化
watch(() => props.open, (newVal) => {
  data.dialogVisible = newVal;
});

// 监听dialogVisible变化并触发事件
watch(dialogVisible, (newVal) => {
  emit('update:open', newVal);
});

// 设置表单数据
function setForm(formData) {
  form.value = formData;
  nextTick(() => {
    marketingRef.value?.clearValidate();
  });
}

// 提交表单
function submitForm() {
  marketingRef.value?.validate((valid) => {
    if (valid) {
      emit('success', form.value);
    }
  });
}

// 取消
function cancel() {
  data.dialogVisible = false;
  marketingRef.value?.resetFields();
}

// 定义对外暴露的方法
defineExpose({
  setForm
});
</script>